<template>
  <div class="maphouse">
    <!-- 地图找房页面 -->
    <div class="header">
      <i class="iconfont icon-zuo" @click="Return"></i>
    </div>
    <!-- 一级省份筛选 -->
    <van-dropdown-menu active-color="skyblue">
      <van-dropdown-item v-model="value0" :options="option0" @change="handlechange" />
    </van-dropdown-menu>
    <!-- 多个筛选 -->
    <div class="maphouse-nav">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
        <van-dropdown-item title="筛选" ref="item">
          <ul class="ul1">
            <li>
              <span>排序</span>
              <van-row>
                <van-col span="8">默认</van-col>
                <van-col span="8">价格由低到高</van-col>
                <van-col span="8">价格由高到低</van-col>
              </van-row>
              <van-row>
                <van-col span="8">开盘时间较早</van-col>
                <van-col span="8">开盘时间较晚</van-col>
              </van-row>
            </li>
            <li>
              <span>特色</span>
              <van-row>
                <van-col span="8">全部</van-col>
                <van-col span="8">小户型</van-col>
                <van-col span="8">低密居所</van-col>
              </van-row>
              <van-row>
                <van-col span="8">旅游产地</van-col>
                <van-col span="8">教育资源</van-col>
              </van-row>
            </li>
            <li>
              <span>状态</span>
              <van-row>
                <van-col span="8">全部</van-col>
                <van-col span="8">在售</van-col>
                <van-col span="8">新盘</van-col>
              </van-row>
              <van-row>
                <van-col span="8">尾盘</van-col>
              </van-row>
            </li>
            <li>
              <span>装修</span>
              <van-row>
                <van-col span="8">全部</van-col>
                <van-col span="8">毛坯</van-col>
                <van-col span="8">简装</van-col>
              </van-row>
              <van-row>
                <van-col span="8">精装</van-col>
              </van-row>
            </li>
          </ul>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 地图 -->
    <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="7">
      <bm-marker
        v-for="(item,index) in cityList"
        :key="index"
        :position="{lng: item.longitude, lat:item.latitude}"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-label
          :content="item.name"
          :position="{lng: item.longitude, lat:item.latitude}"
          :labelStyle="{color: 'red', fontSize : '14px'}"
          :offset="{width: -35, height: 30}"
        />
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import {  getMapdata, getProvince } from "@/api/index.js";
export default {
  data() {
    return {
      cityList: [], //城市数据,
      value0: 0,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      switch1: false,
      switch2: false,
      option0: [
        { text: "区域", value: 0 },
        { text: "河南省", value: 410000 },
        { text: "河北省", value: 130000 },
        { text: "山西省", value: "山西省" },
        { text: "辽宁省", value: "辽宁省" },
        { text: "浙江省", value: "浙江省" },
        { text: "福建省", value: "福建省" }
      ],
      option1: [
        { text: "区域", value: 0 },
        { text: "泰国", value: 1 },
        { text: "新加坡", value: 2 },
        { text: "印度尼西亚", value: 3 }
      ],
      option2: [
        { text: "价格", value: 0 },
        { text: "100", value: 1 },
        { text: "200", value: 2 },
        { text: "300", value: 3 }
      ],
      option3: [
        { text: "类型", value: 0 },
        { text: "二手房", value: 1 },
        { text: "别墅", value: 2 },
        { text: "茅草屋", value: 3 }
      ],
      option4: [
        { text: "更多", value: 0 },
        { text: "排序", value: 1 },
        { text: "特色", value: 2 },
        { text: "状态", value: 3 },
        { text: "装修", value: 4 }
      ]
    };
  },
  created() {
    // this.getCity();
  },
  methods: {
    // getCity() {
    //   getCityList().then(res => {
    //     // this.cityList = res.data.data;
    //     // console.log(res);
    //   });
    // },
    Return() {
      this.$router.push("/houselist");
    },
    handlechange(value) {
      getProvince({ params: { code: value } }).then(res => {
        console.log(res);
        this.cityList=res.data.data
      });
    }
  }
};
</script>

<style>
.maphouse {
  width: 100%;
  height: 100%;
}
/* .header {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
} */
.maphouse-nav > .van-dropdown-menu > .van-dropdown-menu__item > .ul1 > li {
  margin: 20px, 0;
}
.map {
  width: 100%;
  height: 100%;
}
</style>